<template>
  <div class="container">
    <div class="form-list top">
      <div class="box-radius">
        <div class="form-list-title">资产统计</div>
        <div class="box-asset">
          <el-row>
            <el-col v-for="item in assetData.assetCategory" :key="item.key" :span="4">
              <div class="asset-son">
                <div class="asset-left">
                  <img :src="baseUrl + item.url" alt />
                </div>
                <div class="asset-right">
                  <span class="asset-name">{{ item.name }}</span>
                  <span class="asset-value">{{ item.value }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="form-list middle">
      <div class="box-radius">
        <div class="form-list-title">预警信息</div>
        <div class="box-asset">
          <el-row>
            <el-col :span="8">
              <div class="asset-middle">
                <div class="status-title">使用状态</div>
                <div v-for="(item, index) in usageStatusList" :key="item.key">
                  <div v-show="item.key == choseUseKey" class="warning">
                    <div class="warning-left">
                      <el-button class="warning-icon" :disabled="index == 0" @click="useNext(index, -1)">
                        <i class="el-icon-arrow-left" />
                      </el-button>
                      <div class="warning-middle">
                        <img :src="baseUrl + item.url" alt />
                        <span>{{ item.name }}</span>
                      </div>
                      <el-button
                        class="warning-icon"
                        :disabled="index == usageStatusList.length - 1"
                        @click="useNext(index, 1)">
                        <i class="el-icon-arrow-right" />
                      </el-button>
                    </div>
                    <div class="warning-right">
                      <div v-for="sonItem in item.list" :key="sonItem.key" class="warning-status">
                        <span class="warning-name">{{ sonItem.name }}</span>
                        <span class="warning-value">{{ sonItem.value }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="asset-middle">
                <div class="status-title">设备状态</div>
                <div v-for="(item, index) in deviceStatusList" :key="item.key">
                  <div v-show="item.key == choseDeviceKey" class="warning">
                    <div class="warning-left">
                      <el-button class="warning-icon" :disabled="index == 0" @click="deviceNext(index, -1)">
                        <i class="el-icon-arrow-left" />
                      </el-button>
                      <div class="warning-middle">
                        <img :src="baseUrl + item.url" alt />
                        <span>{{ item.name }}</span>
                      </div>
                      <el-button
                        class="warning-icon"
                        :disabled="index == deviceStatusList.length - 1"
                        @click="deviceNext(index, 1)">
                        <i class="el-icon-arrow-right" />
                      </el-button>
                    </div>
                    <div class="warning-right">
                      <div v-for="sonItem in item.list" :key="sonItem.key" class="warning-status">
                        <span class="warning-name">{{ sonItem.name }}</span>
                        <span class="warning-value">{{ sonItem.value }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="asset-middle">
                <div class="status-title">即将过保设备</div>
                <div v-if="assetData.overRepair" class="over">
                  <div class="over-left">
                    <img :src="baseUrl + assetData.overRepair[0].url" alt />
                  </div>
                  <div class="over-right">
                    <span class="over-name">{{ assetData.overRepair[0].name }}</span>
                    <span class="over-value">{{ assetData.overRepair[0].value }}</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="form-list">
      <div class="box-radius" style="position: relative;padding-bottom: 40px;">
        <div class="form-list-title">提醒信息</div>
        <el-row class="bottom" :gutter="20">
          <el-col :span="5">
            <div
              v-if="assetData.returnBack"
              class="b-left"
              :class="showDevice ? 'active' : ''"
              @click="choseList(true)">
              <div class="b-left-son">
                <!-- <img src="@/assets/images/zcgl11@2x.png" /> -->
                <img :src="baseUrl + assetData.returnBack[0].url" alt />
                <span> {{ assetData.returnBack[0].name }} </span>
              </div>
              <span class="b-right-son"> {{ assetData.returnBack[0].value }} </span>
            </div>
            <div
              v-if="assetData.dimission"
              class="b-left"
              :class="!showDevice ? 'active' : ''"
              @click="choseList(false)">
              <div class="b-left-son">
                <img :src="baseUrl + assetData.dimission[0].url" alt />
                <span> {{ assetData.dimission[0].name }} </span>
              </div>
              <span class="b-right-son"> {{ assetData.dimission[0].value }} </span>
            </div>
          </el-col>
          <el-col :span="19">
            <div class="h-table">
              <hk-table
                v-if="showDevice"
                :table-data="deviceData"
                :table-columns="deviceColumn"
                :selection="false"
                :show-index="true"
                :total="total"
                :loading="loading"
                :common-fixed="true"
                :query-params="queryParamsData"
                @changePage="getDeviceData" />
              <hk-table
                v-else
                :table-data="userDada"
                :table-columns="userColumn"
                :selection="false"
                :show-index="true"
                :total="total"
                :loading="loading"
                :common-fixed="true"
                :query-params="queryParamsList"
                @changePage="getUserData" />
            </div>
          </el-col>
        </el-row>
        <div class="more" @click="goPage">
          <span>更多<i class="el-icon-d-arrow-right" /></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStatistics, getAssetState, deviceList, userList } from '@/api/specialProject/assetView.js'

import HkTable from '@/components/Hk-Table/index.vue'

export default {
  components: {
    HkTable,
  },
  data() {
    return {
      choseUseKey: '1',
      choseDeviceKey: '1',
      baseUrl: window.baseUrl.default,
      showDevice: true,
      useIndex: 0,
      userDada: [],
      userColumn: [
        { label: '运维人员名称', param: 'userName' },
        { label: '运维岗位', param: 'userPostName' },
        { label: '受雇单位', param: 'unitName' },
        { label: '归口管理部门', param: 'deptName' },
        { label: '离部时间', param: 'departureDate' },
      ],
      deviceData: [],
      deviceColumn: [
        { label: '设备名称', param: 'assetName' },
        { label: '设备IP', param: 'ip' },
        { label: '设备类型', param: 'assetType' },
        { label: '责任人', param: 'ownerName' },
        { label: '归还日期', param: 'expectedReturnTime' },
      ],

      usageStatusList: [],
      deviceStatusList: [],
      queryParamsData: {
        current: 1,
        size: 10,
        departure: 'sys.action.notes.people.day',
      },
      queryParamsList: {
        current: 1,
        size: 10,
        expectedReturn: 'sys.action.notes.assets.over.repair.day',
      },
      loading: false,
      total: 0,
      typeList: [],
      assetData: {},
    }
  },
  created() {
    this.getData()
    this.getWarning()
    this.getDeviceData()
    this.getUserData()
  },
  methods: {
    goPage(e) {
      if (this.showDevice) {
        this.$router.push({
          name: 'sp_asset',
          params: {
            key: 'expectedReturn',
            value: 'sys.action.notes.assets.over.repair.day',
          },
        })
      } else {
        this.$router.push({
          name: 'sp_personnel',
          params: {
            key: 'departure',
            value: 'sys.action.notes.people.day',
          },
        })
      }
    },
    useNext(index, num) {
      var cha = index + num
      this.choseUseKey = this.usageStatusList[cha].key
    },
    deviceNext(index, num) {
      var cha = index + num
      this.choseDeviceKey = this.deviceStatusList[cha].key
    },
    // 选择哪个列表
    choseList(e) {
      this.showDevice = e
      if (e) {
        this.getDeviceData()
      } else {
        this.getUserData()
      }
    },
    //  查预警信息
    getWarning() {
      getAssetState({ column: 'usage_status', code: 'usageStatus' }).then((res) => {
        this.usageStatusList = res
        this.choseUseKey = res[0].key
      })
      getAssetState({ column: 'status', code: 'deviceStatus' }).then((res) => {
        this.deviceStatusList = res
        this.choseDeviceKey = res[0].key
      })
    },
    /** 资产统计 */
    getData() {
      getStatistics().then((res) => {
        this.assetData = res
      })
    },
    // 离部人员
    getUserData(val) {
      userList({ ...this.queryParamsData, ...val }).then((res) => {
        console.log(res, 'fa')
        this.userDada = res.list
        this.total = res.total
      })
    },
    // 归还设备
    getDeviceData(val) {
      deviceList({ ...this.queryParamsList, ...val }).then((res) => {
        this.deviceData = res.list
        this.total = res.total
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dark-theme .container,
.dark-theme .container .form-list {
  background: transparent !important;
}
.dark-theme {
  .container .form-list .asset-son {
    background: transparent !important;
    color: #fff !important;
  }
  .asset-son,
  .asset-middle {
    border: 1px solid rgba(59, 139, 255, 0.3);
  }
  .form-list-title {
    color: #fff;
  }
  .b-left,
  .box-radius,
  .asset-middle,
  .warning,
  .over {
    background: transparent !important;
  }
  .b-left {
    border: 1px solid rgba(59, 139, 255, 0.3);
  }
  .el-tooltip {
    color: #fff !important;
  }
  .active {
    background-color: rgba(59, 139, 255, 0.3) !important;
  }
}
::v-deep {
  .el-table {
    margin-top: 0 !important;
  }
}
.h-table {
  margin-right: 10px;
}
.more {
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  color: #4b6eef;
}
.over {
  background-color: #f3f5fb;
  padding: 1.25rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .over-left {
    height: 80px;
    margin-right: 10px;
    img {
      height: 100%;
    }
  }
  .over-right {
    flex: 1;
    height: 80px;
    padding: 2px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .over-name {
      font-size: 16px;
    }
    .over-value {
      font-size: 30px;
      font-weight: 500;
    }
  }
}
.asset-middle {
  padding: 10px;
  border-radius: 4px;
  background-color: #f3f5fb;
  margin: 10px;
  height: 180px;
  .status-title {
    margin-top: 5px;
    margin-left: 20px;
    font-weight: 600;
    font-size: 16px;
  }
  .warning {
    background-color: #f3f5fb;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .warning-icon {
      border: 1px solid rgba(215, 215, 215, 1);
      border-radius: 4px;
      text-align: center;
      padding: 4px;
    }
    .warning-left {
      width: 40%;
      height: 80px;
      margin: 0 10px 10px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .warning-middle {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          height: 100%;
          margin-bottom: 10px;
        }
      }
    }
    .warning-right {
      flex: 1;
      height: 80px;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .warning-status {
        display: flex;
        justify-content: space-between;
      }
      .warning-name {
        font-size: 14px;
      }
      .warning-value {
        font-weight: 500;
        font-size: 18px;
      }
    }
  }
}
.b-left {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f3f5fb;
  border-radius: 4px;
  // width: 336px;
  border: 1px solid #f3f5fb;

  height: 65px;
  margin: 20px;
  cursor: pointer;
  &:hover {
    background-color: rgba(59, 139, 255, 0.3) !important;
  }
  img {
    width: 30px;
    margin-right: 10px;
  }
  .b-left-son {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .b-right-son {
    font-size: 24px;
    font-weight: 500;
  }
}
.active {
  background-color: rgba(59, 139, 255, 0.3) !important;
}
.container {
  height: 100%;
  background: #eef0f5;
  overflow: auto;
  display: flex;
  flex-direction: column;

  .footer {
    text-align: right;
    padding: 10px 20px;
  }

  .middle {
    margin: 20px 0;
    // height: 270px;
  }
  .bottom {
    // height: 410px;
    // height: calc(50% - 20px);
  }
  .form-list {
    background: #eef0f5;
    // overflow: auto;
    &:nth-last-child(1) {
      margin-bottom: 0 !important;
    }
    .form-list-title {
      margin: 10px;
      font-weight: 700;
      font-size: 16px;
    }
    .box-radius {
      height: 100%;
      padding: 10px;
      border-radius: 4px;
      background: #fff;
      .box-asset {
        height: 100%;
        overflow: auto;
        border-radius: 4px;
        .asset-son {
          background-color: #f3f5fb;
          margin: 0 10px 10px 10px;
          border-radius: 4px;
          padding: 1.25rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .asset-left {
            height: 80px;
            margin-right: 10px;
            img {
              height: 100%;
            }
          }
          .asset-right {
            height: 80px;
            padding: 5px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .asset-name {
              font-size: 14px;
            }
            .asset-value {
              font-weight: 700;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
